<script setup lang="ts">
defineOptions({
  name: "fabCommonQueryAbnormal"
});

import { ref, computed } from "vue";
import { Search } from "@px-ui/icons-vue";
import modelBox from "@/views/common/components/modelBox/index.vue";
import commonTable from "@/views/common/components/commonTable/index.vue";
import { queryFabCommonQueryAlarm } from "@/api/modules/fab";
import { useElementBounding } from "@vueuse/core";

const commonTableBoxRef = ref<HTMLElement | null>(null);

const { height } = useElementBounding(commonTableBoxRef);

const tableHeight = computed(() => `${height.value}px`);

const boardTitle = ref<string>("异常事件");
const title = ref<string>("");
const tableParams = ref<{ title: string }>({ title: "" });
const tableData = ref<Array<any>>([]);
const tableLoading = ref<boolean>(false);

const tableCloumns = [
  { label: "科室", prop: "className", width: 60 },
  { label: "事件标题", prop: "title", width: 60 },
  { label: "位置", prop: "station", width: 60 },
  { label: "涉及机台", prop: "eqpId", width: 60 },
  { label: "状态", prop: "status", width: 60 },
  { label: "负责人", prop: "operatorName", width: 60 }
];

const titleChangeHandler = () => {
  tableParams.value = { title: title.value };
};
</script>

<template>
  <modelBox :title="boardTitle">
    <template #title>
      <div class="production-title">
        <px-input
          v-model.trim="title"
          clearable
          :prefix-icon="Search"
          size="small"
          placeholder="请输入事件标题"
          @keydown.enter="titleChangeHandler"
          @clear="titleChangeHandler"
        />
      </div>
    </template>
    <div v-show="!!tableData?.length" ref="commonTableBoxRef" class="production-abnormal-table">
      <commonTable
        ref="commonTableRef"
        v-model="tableData"
        v-model:loading="tableLoading"
        mode="stripe"
        immediate
        :pagination="false"
        :border="false"
        :tableCloumns="tableCloumns"
        :height="tableHeight"
        :axiosApi="queryFabCommonQueryAlarm"
        :params="tableParams"
      />
    </div>
    <div v-if="!tableData?.length" v-loading="tableLoading" class="production-abnormal-table-empty">
      <px-empty class="px-empty-common" />
    </div>
  </modelBox>
</template>

<style lang="scss" scoped>
.production-title {
  width: 160px;
}

.production-abnormal-table {
  width: 100%;
  height: calc(100% - 2px);
}

.production-abnormal-table-empty {
  height: calc(100% - 2px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
